<template>
	<view class="content">
		<form @submit="formSubmit" :rules="Formrules">
			<view class="avatorWrapper">
				<view class="avator">
					<image class="img" src="../../static/logo.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="form">
				<view class="inputWrapper">
					<input class="input" name="name" type="text" placeholder="请输入用户名" v-model="name" />

				</view>
				<view class="inputWrapper">
					<input class="input" name="password" type="password" placeholder="请输入密码" v-model="password" />
				</view>
			</view>
			<button form-type="submit" class="loginBtn" data-eventsync="true">确认登录</button>
		</form>
		<view>
			<view class="add" @click="register" data-eventsync="true">没有账户？请注册</view>
		</view>
	</view>
</template>

<script>
	import {
		setToken,
		setUser
	} from '../../utils/auth.js';
	import {
		login
	} from '../../api/user.js';

	export default {
		data() {
			return {
				name: "",
				password: ""
			}
		},
		onLoad() {

		},
		methods: {
			/**发布提交 */
			formSubmit(e) {
				var that = this;
				var name = e.detail.value.name;
				var password = e.detail.value.password;
				if (name == "") {
					uni.showToast({
						title: '用户名不能为空',
						icon: 'none',
						duration: 500
					});
				} else if (password == "") {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none',
						duration: 500
					});
				} else {
					let data = JSON.stringify({
							name: name,
							password: password,
					})
					login(data).then(res => {
							if (res.data.data.code == "201") {
								uni.showToast({
									title: '用户名或密码错误',
									icon: 'none',
									duration: 500
								});
							} else {
								var id = res.data.data.user.id;
								setToken(id)
								setUser(res.data.data.user)
								uni.showToast({
									title: '登录成功',
									duration: 500
								})
								uni.redirectTo({
									url: encodeURI('/pages/map/map?id=' + id),
								})
								console.log(res.data)
							}
						})
				}

			},
			register() {
				uni.navigateTo({
					url: '../index/add'
				})
			}

		}
	}
</script>

<style>
	.content {
		background: #EAF6F9;
		width: 100vw;
		height: 100vh;
	}

	.avatorWrapper {
		height: 20vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.avator {
		width: 200upx;
		height: 200upx;
		overflow: hidden;
	}

	.avator .img {
		width: 100%
	}

	.form {
		padding: 0 100upx;
		margin-top: 80px;
	}

	.inputWrapper {
		width: 100%;
		height: 80upx;
		background: white;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 25px;
	}

	.inputWrapper .input {
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 15px;
	}

	.loginBtn {
		width: 50%;
		height: 80upx;
		background: #77B307;
		border-radius: 50upx;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.loginBtn .btnValue {
		color: white;
	}

	.forgotBtn {
		text-align: center;
		color: #EAF6F9;
		font-size: 15px;
		margin-top: 20px;
	}

	.add {
		width: 287rpx;
		height: 64rpx;
		display: border-box;
		left: 457rpx;
		top: 67rpx;
		position: relative;
	}
</style>